@extends('layouts.app')
@section('content')
    <section class="content-header" style="overflow: hidden;">
        <h1 class="pull-left">编辑文章</h1>
    </section>
    <div class="content">
        <div class="box box-primary">
            <div class="box-body">
                <div class="panel-title">
                    <h5><i class="fa fa-hand-o-right"></i>注意：可先根据文章地址获取文章内容，再编辑！只支持微信公众号文章。</h5>
                </div>
                <div class="form-group panel-row">
                    <label for="articleUrl">原文章地址</label>
                    <input type="text" class="form-control" id="articleUrl" autocomplete="off" value="" placeholder="请输入原文章地址(http/https)">
                    <button id="getArticle" type="button" class="btn btn-success btn-sm btn-top"><i class="fa fa-cloud-upload"></i>&nbsp;获取</button>
                </div>

                <div class="panel-row panel-content">
                    <div class="panel-content__left">
                        <div id="container" name="content" type="text/plain" style="width: 500px; height: 600px;">
                            {{--这里写你的初始化内容--}}
                        </div>
                    </div>
                    <div class="panel-content__right">
                        <div class="form-group">
                            <label for="url">原文地址</label>
                            <div class="input-group form-control">
                                <input type="text" autocomplete="off" class="form-control" id="url" value="{{ $article->url }}" placeholder="请输入原文地址" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="title">标题</label>
                            <div class="input-group form-control">
                                <input type="text" autocomplete="off" class="form-control" id="title" value="{{ $article->title }}" placeholder="请输入标题">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="author">作者/公众号</label>
                            <div class="input-group form-control">
                                <input type="text" autocomplete="off" class="form-control" id="author" value="{{ $article->author }}" placeholder="请输入作者">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="copyright">版权</label>
                            <div class="input-group form-control">
                                <div class="input-group-addon">&copy;</div>
                                <input type="text" class="form-control" id="copyright" value="{{ $article->copyright }}" placeholder="请输入版权所有者">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="label">标签</label>
                            <div class="input-group form-control">
                                <input type="text" autocomplete="off" id="label" value="{{ $article->label }}" class="form-control" placeholder="请输入文章标签" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="goods">商品</label>
                            <small>*请输入商品id，以英文逗号分隔</small>
                            <div class="input-group form-control">
                                <input type="text" autocomplete="off" id="goods" value="{{ $article->goods }}" class="form-control" placeholder="请输入商品id" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="sort">排序</label>
                            <div class="input-group form-control">
                                <input type="text" autocomplete="off" id="sort" value="{{ $article->sort }}" class="form-control" placeholder="请输入排序" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="radio-inline">
                                <input type="radio" name="status" value="1" {{ $article->status==1?'checked':'' }}  /> 显示
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="status" value="0" {{ $article->status==0?'checked':'' }} /> 隐藏
                            </label>
                        </div>

                        <small>*图片尺寸：750*330</small>
                        <form action='' enctype="multipart/form-data" method="post" name="fileForm">
                            <input type="file" name="files" id="imgFlie" >
                        </form>

                        <div id="imgShow" class="img-up panel-row">
                            @if($article->img)
                                <img src="{{ $article->img }}" width="95%">
                            @else
                                <i class="fa fa-upload fa-5x icon-color" aria-hidden="true"></i>
                            @endif
                        </div>

                        <button id="updata" type="button" class="btn btn-success btn-lg btn-top"><i class="fa fa-arrow-circle-o-up"></i>&nbsp;提交</button>
                    </div>
                </div>


            </div>
        </div>
    </div>
@endsection

@section('css')

    <style>
        #edui1{
            overflow-x: hidden;
        }
        .panel-row{
            display: block;
            padding: 15px;
            border: 1px dashed #3C8DBC;
            border-radius: 8px;
        }
        .panel-title{
            display: block;
            padding: 0 15px;
            border: 1px solid #3C8DBC;
            border-left: 8px solid #3C8DBC;
            border-radius: 8px;
            margin-bottom: 15px;
            background-color: #fff;
        }
        .btn-top{
            margin-top: 8px;
        }
        .panel-content{
            display: flex;
            display: -webkit-flex;
            background-color: #fff;
            margin-top: 15px;
            min-height: 500px;
        }
        .panel-content__left{
            width: 540px;
            padding-right: 15px;
        }
        .panel-content__right{
            flex: 1;
        }
        .img-up{
            min-height: 180px;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .icon-color{
            color: #198965;
        }
        #imgFlie{
            display: none;
        }
    </style>
@endsection

@section('scripts')
    <script src="https://cdn.bootcss.com/layer/3.0.3/layer.min.js"></script>
    <script type="text/javascript" src="{{asset('js/ueditor/ueditor.config.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/ueditor/ueditor.all.min.js')}}"></script>
    <script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>

    <script>

        //初始化页面
        var ue = UE.getEditor('container');
        var temp = '{!!  $article->content !!}';
        ue.ready(function() {//编辑器初始化完成再赋值
            ue.setContent(temp);  //赋值给UEditor
        });

        var form = $("form[name=fileForm]");
        var img = '{{ $article->img }}';

        $('#imgShow').click(function(){
            $('#imgFlie').click();
        });

        $('#imgFlie').change(function(){
            console.log($(this).val());
            form.ajaxSubmit({
                url: "{{ route('article.upload') }}",
                type: "POST",
                dataType: "json",
                success: function(data){
                    if(data.status == 1){
                        $('#imgShow').html('<img src="'+data.data+'" width="95%">');
                        img = data.data;
                    }else{
                        layer.open({
                            title: '警告',
                            content: data.msg
                        });
                    }
                }
            });
        });


        $('#getArticle').click(function(){
            var tempZz = /(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
            var url = $('#articleUrl').val();
            if(tempZz.test(url)){
                $.ajax({
                    type: "GET",
                    url: "{{ route('article.get') }}",
                    data: {"url": url},
                    dataType: "json",
                    success: function(data){
                        if(data.status == 1){
//                            console.log(data);
                            $('#url').val(url);
                            $('#title').val(data.data.title);
                            $('#author').val(data.data.author);
                            ue.setContent(data.data.content);
                        }else{
                            layer.open({
                                title: '警告',
                                content: data.msg
                            });
                        }
                    },
                    error: function () {

                    }
                });
            }else{
                layer.open({
                    title: '警告',
                    content: '请输入正确的网址'
                });
            }
        });

        $('#updata').click(function(){
            var content = ue.getContent();
            var url = $('#url').val();
            var label = $('#label').val();
            var title = $('#title').val();
            var author = $('#author').val();
            var copyright = $('#copyright').val();
            var goods = $('#goods').val();
            var sort = $('#sort').val();
            var status = $("input[name='status']:checked").val();

            if(content){
                if(title){
                    if(author){
                        if(label){
                            if(copyright){
                                if(img){
                                    $.ajax({
                                        type: "POST",
                                        url: "{{route('article.update', ['id' => $article->id])}}",
                                        data: {
                                            '_method': "PATCH",
                                            'sort': sort,
                                            'content': content,
                                            'status': status,
                                            'goods': goods,
                                            'title': title,
                                            'author': author,
                                            'copyright': copyright,
                                            'label': label,
                                            'img': img,
                                            'url': url
                                        },
                                        dataType: 'json',
                                        success: function (data) {
                                            if (data.status == 1) {
                                                layer.open({
                                                    title: '提示',
                                                    content: data.msg
                                                });
                                            } else {
                                                layer.open({
                                                    title: '警告',
                                                    content: data.msg
                                                });
                                            }
                                        },
                                        error: function () {

                                        }
                                    });

                                }else{
                                    layer.open({
                                        title: '警告',
                                        content: '没有图片'
                                    });
                                }

                            }else{
                                layer.open({
                                    title: '警告',
                                    content: '没有版权'
                                });
                            }

                        }else{
                            layer.open({
                                title: '警告',
                                content: '没有标签'
                            });
                        }


                    }else{
                        layer.open({
                            title: '警告',
                            content: '没有作者'
                        });
                    }

                }else{
                    layer.open({
                        title: '警告',
                        content: '没有标题'
                    });
                }

            }else{
                layer.open({
                    title: '警告',
                    content: '没有文章内容'
                });
            }
        });




    </script>


@endsection
